{extend name="index/base" /}

{block name='title'}{:empty($goodsInfo['meta_desc'])?$goodsInfo['name']:$goodsInfo['meta_desc']}{/block}
{block name='platform_description'}{:empty($goodsInfo['meta_desc']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_description') : $goodsInfo['meta_desc']}{/block}
{block name='platform_keywords'}{:empty($goodsInfo['meta_key']) ? \\app\\common\\model\\SysSettingModel::getContent('normal','platform_keyword') : $goodsInfo['meta_key']}{/block}
{block name='content'}

<div class="wrapper-body">
    <div class="container my-5">
        <div class="goods-gallery row">
            <!-- Product gallery-->
            <div class="col-lg-6"> 
                <div class="product-gallery clearfix">
                    <div class="product-gallery-preview" @click="imageZoom = false">
                        <div class="slider slider-preview">
                            {volist name="goodsInfo['img']" id="vo"}
                            <div class="product-gallery-preview-item">
                                <img class="image-zoom" src="{$vo}" alt="{$goodsInfo['name']}" @click.stop="clickZoom" />
                                <div class="image-zoom-pane" v-show="imageZoom">
                                    <a class="cloud-zoom" href="{$vo}" rel="position: 'inside' ,smoothMove: '1', showTitle: false, adjustX:0, adjustY:0" @click.stop="imageZoom = false">
                                        <img class="cloud-zoom-image" src="{$vo}" alt="{$goodsInfo['name']}" />
                                    </a>
                                </div>
                            </div>

                            {/volist}
                        </div>
                       
                    </div>
                    <div class="product-gallery-thumblist">
                        <div class="slider slider-thumblist">
                            {volist name="goodsInfo['img']" id="vo"}
                            <div class="product-gallery-thumblist-item" @click="imageZoom = false">
                                <a href="javascript:;">
                                    <img src="{$vo}" alt="{$goodsInfo['name']}" />
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="addthis_toolbox">                            
                    <a href="//www.facebook.com/sharer.php?u={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/facebook.png" width="34" height="34" />
                    </a>
                    <a href="//twitter.com/share?text={$goodsInfo['name']}&url={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/twitter.png" width="34" height="34" />
                    </a>

                    <a href="//pinterest.com/pin/create/button/?url={:request()->url(true)}" target="_blank" class="addthis_button">
                        <img src="/assets/images/pinterest.png" width="34" height="34" />
                    </a>

                    <a href="http://www.linkedin.com/shareArticle?mini=true&url={:request()->url(true)}&title={$goodsInfo['name']}&source=lovessales" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=380,width=660');return false;" class="addthis_button">
                        <img src="/assets/images/linked.png" width="34" height="34" />
                    </a>
                </div>
                
            </div>
            <div class="col-lg-6">
                <div class="goods-info ">
                    <div class="goods-title"> <h1 class="goods-text">{$goodsInfo['name']}</h1></div>


                    <div class="review-info-wrapper">
                        <div class="review-info clearfix mt-1">
                            <p class="star js-avgrate-star js-rate-star">

                                {:empty($goodsInfo['score'])?'':str_repeat('<i class="review-star rated" ></i>',$goodsInfo['score'])}

                            </p>
                            <p class="js-rate-all ml-1">{$goodsInfo['score']}</p>
                            <p class="link">
                                <a href="javascript:;" class="logsss_event_cl">（<span class="js-review-count">{:empty($commentInfo)?0:$commentInfo['count']}</span> Reviews ）</a>
                            </p>
                        </div>
                    </div>

                    <div class="newuser-coupon-container js-newuser-coupon shown" @click="coupon_tip = true">
                        <div class="newuser-coupon-text js-newuser-coupon-register">
                            <a href="javascript:;" class="js_login_reg_btn js-newuser-register newuser-coupon-get logsss_event_cl">
                                {$coupon_tip_model['name']} <span class="newuser-coupon-label">Get it</span>
                            </a>
                        </div>
                    </div>

                    <template v-if="!sku.length">
                        <div class="price-info clearfix">
                            <span class="shop-price">{$money_f}{$goodsInfo['sold_price']}</span>
                            {if(!empty($goodsInfo['og_price']) && $goodsInfo['og_price']*1 > 0 ) }
                            <span class="market-price">{$money_f}{$goodsInfo['og_price']}</span>
                            {/if}
                            {if(!empty(session('user_info.user_id')))}
                            <button class="add-to-fav" :class="{'active':goods_coll_info.is_coll==1}"  @click="handleGoodsColl(goods_coll_info)"></button>
                            {/if}
                        </div>


                        <div class="attr-info mt-1 clearfix">
                            <dl class="attr-item mb-1 clearfix">
                                <dt class="name"><h2>Qty</h2> </dt>
                                <dd class="amount-operation clearfix">
                                    <span class="decrease" @click="handleBuyNum(-1)"></span>
                                    <input type="number" @input="handleBuyNumChange" max="199" min="1" name="amount" v-model="buy_num">
                                    <span class="increase" @click="handleBuyNum(1)"></span>
                                </dd>
                            </dl>
                        </div>

                        <div class="cart-bottom-box" >
                            {if($goodsInfo['sold_state']==1 || $goodsInfo['stock']>0)}
                            <a href="javascript:;" class="add-to-cart" @click="handleAddCart">
                                Add to cart
                            </a>
                            {else/}
                            <a href="javascript:;" class="add-to-cart">
                                Not enough stock
                            </a>
                            {/if}
                        </div>


                    </template>
                    <template v-else>
                        <div class="price-info mt-1 clearfix">
                            <span class="shop-price">{$money_f}{{get_sku_price_obj.sold_price}}</span>
                            <span class="market-price" v-if="get_sku_price_obj.og_price && get_sku_price_obj.og_price-0>0">{$money_f}{{get_sku_price_obj.og_price}}</span>

                            {if(!empty(session('user_info.user_id')))}
                            <button class="add-to-fav" :class="{'active':goods_coll_info.is_coll==1}"  @click="handleGoodsColl(goods_coll_info)"></button>
                            {/if}

                        </div>


                        <div class="attr-info mt-1 clearfix" v-for="(item,index) in sku" :key="index">
                            <dl class="attr-item mb-1 clearfix" >
                                <dt class="name"><h2>{{item.name}}:{{get_sku_price_names[index]}}</h2> </dt>
                                <dd class="attr-option">

                                    <div class="option " :class="[sku_item.img && sku_item.img.length>0?'color':'size',get_sku_price_names.length>index && get_sku_price_names[index]==sku_item.name?'active':'']"
                                         v-for="(sku_item,sku_index) in item.content" :key="sku_index" @click="handleSku(index,sku_index,sku_item.name)">


                                        <a href="javascript:;"  v-if="sku_item.img && sku_item.img.length>0"><img :src="sku_item.img" /></a>
                                        <a href="javascript:;"  v-else>{{sku_item.name}}</a>

                                    </div>
                                </dd>
                            </dl>
                        </div>

                        <div class="attr-info mt-1 clearfix">
                            <dl class="attr-item mb-1 clearfix">
                                <dt class="name"><h2>Qty</h2> </dt>
                                <dd class="amount-operation clearfix">
                                    <span class="decrease" @click="handleBuyNum(-1)"></span>
                                    <input type="number" @input="handleBuyNumChange" max="199" min="1" name="amount" v-model="buy_num">
                                    <span class="increase" @click="handleBuyNum(1)"></span>
                                </dd>
                            </dl>
                        </div>
                        
                        <div class="bug-gift-box">
                            <div class="bug-gift-container">
                                <div class="gift-product">
                                    <div class="gift-left">
                                        <img alt="img" class="img-icon" src="/assets/images/gift-icon.svg">
                                        <span class="activity-name-span">free gift on orders over ${$gift_money}</span>
                                    </div>
                                    <div class="gift-right">
                                        <span class="view-gift not-tablet" @click="show_gift = true"> View gift&gt;</span>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="cart-bottom-box" >
                            <a href="javascript:;" class="add-to-cart" v-if="sold_state==1 || get_sku_price_obj.stock-0 > 0" @click="handleAddCart">
                                Add to cart
                            </a>
                            <a href="javascript:;" class="add-to-cart" v-else>
                                Not enough stock
                            </a>
                            <!--<a href="javascript:;" class="add-to-pay">
                                <img src="/assets/images/paypal_btn.png" alt="">
                            </a>-->
                        </div>
                    </template>

                    <div class="goods-operate">
                        <ul class="clearfix buyer-protection-list">
                            <!-- <li class="buyer-protection-30">
                                30 Day Returns Warranty
                            </li> -->
                            <!-- <li style="margin-right: 0;" class="buyer-protection-50">$50 Unconditional Warranty</li> -->

                            <!--<li class="buyer-protection-free">
                                GETTING CLOSER! ONLY<b class="freeShip"><span class="money">$27.03</span></b> AWAY FROM FREE SHIPPING!
                            </li>-->
                        </ul>
                    </div>

                   

                    <div class="accordion mt-4" id="productPanels">
                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <a class="accordion-button collapsed" href="#productSize" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="productSize">
                                    PRODUCT DETAILS
                                </a>
                            </h3>
                            <div class="accordion-collapse collapse" id="productSize" data-bs-parent="#productPanels" style="">
                                <div class="accordion-body">
                                    {$goodsInfo['content']|raw}
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <a class="accordion-button collapsed" href="#shippingOptions" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="shippingOptions">
                                    SHIPPING & RETURNS
                                </a>

                            </h3>
                            <div class="accordion-collapse collapse" id="shippingOptions" data-bs-parent="#productPanels" style="">
                                <div class="accordion-body">
                                    {:\\app\\common\\model\\SysSettingModel::getContent('shipping_returns')}
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="goods-collocation-section">
                        <p class="collocation-section-title">STYLE WITH</p>

                        <div class="goods-collocation-content">
                            <div class="slider goods-items">
                                <div class="px-2">
                                    <div class="goods-collocation-group" v-for="(item,index) in ad_list" :key="index">
                                        <a :href="item.url">
                                            <img :src="item.img" :alt="item.name">
                                        </a>
                                        <span class="buy-together-match"  v-if="item.list.length>0" @click.stop="ad_obj=item">GET THE LOOK</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 广告 -->
        <div class="layui-layer" v-show="get_ad_show_list" style="display: none;">
            <div class="layui-layer-content">
                <div class="collocation-panel">
                    <button type="button" id="close-btn" class="btn-close" @click="ad_obj={}"></button>
                    <div class="collocation-list-wrapper">

                        <div class="good-item-container clearfix" v-for="(item,index) in get_ad_goods_list" :key="index">
                            <a href="javascript:;" class="good-img-link" rel="nofollow">
                                <img :src="item.cover_img" alt="" loading="lazy" decoding="async">
                                <span class="link-remove-item"></span>
                            </a>
                            <div class="good-attr-wrapper">
                                <p class="good-price"><span class="my_shop_price">{$money_f} {{item.sku_select_obj.sold_price}}</span></p>
                                <div class="good-attr-list">
                                    <li class="good-attr-item" v-for="(sku,sku_index) in item.sku_attr" :key="index">
                                        <div class="good-attr-item-content clearfix">
                                            <div class="option "
                                                 :class="[sku_content.img && sku_content.img.length>0?'color':'size',item['sku_group_name'] && item['sku_group_name'][sku_index]==sku_content.name ? 'active':'' ]"
                                                 v-for="(sku_content,sku_content_index) in sku.content" :key="sku_content_index"
                                                 @click="handleGoodsSkuItem(item,sku_index,sku_content.name)"
                                            >

                                                <a href="javascript:;" v-if="sku_content.img && sku_content.img.length>0">
                                                    <img :src="sku_content.img">
                                                </a>
                                                <a href="javascript:;" v-else>{{sku_content.name}}</a>
                                            </div>
                                        </div>
                                    </li>
                                </div>
                                <template v-if="item.sku_price.length>0">
                                    <button class="confirm-addto-bag" @click="handleGoodsAddCart(item.id,item.sku_select_obj.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>

                                </template>
                                <template v-else>
                                    <button class="confirm-addto-bag"  @click="handleGoodsAddCart(item.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>
                                </template>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    

        <!-- 赠品 -->
        <div class="layui-layer" v-show="show_gift" style="display: none;">
            <div class="layui-layer-content">
                <div class="collocation-panel">
                    <button type="button" id="close-btn" class="btn-close" @click="show_gift=false"></button>
                    <div class="collocation-list-wrapper">

                        <div class="good-item-container clearfix" v-for="(item,index) in gift_list" :key="index">
                            <a href="javascript:;" class="good-img-link" rel="nofollow">
                                <img :src="item.cover_img" alt="" loading="lazy" decoding="async">
                                <span class="link-remove-item"></span>
                            </a>
                            <div class="good-attr-wrapper">

                                <p class="good-name">{{item.name}}</p>

                                <p class="good-price"><span class="my_shop_price">{$money_f} {{item.sku_select_obj.sold_price}}</span></p>
                                <div class="good-attr-list">
                                    <li class="good-attr-item" v-for="(sku,sku_index) in item.sku_attr" :key="index">
                                        <div class="good-attr-item-content clearfix">
                                            <div class="option " :class="[sku_content.img && sku_content.img.length>0?'color':'size',item['sku_group_name'] && item['sku_group_name'][sku_index]==sku_content.name ? 'active':'' ]" v-for="(sku_content,sku_content_index) in sku.content" :key="sku_content_index"
                                                 @click="handleGoodsSkuItem(item,sku_index,sku_content.name)"
                                            >

                                                <a href="javascript:;" v-if="sku_content.img && sku_content.img.length>0">
                                                    <img :src="sku_content.img">
                                                </a>
                                                <a href="javascript:;" v-else>{{sku_content.name}}</a>
                                            </div>
                                        </div>
                                    </li>
                                </div>
                                <template v-if="item.sku_price.length>0">
                                    <button class="confirm-addto-bag" @click="handleGoodsAddCart(item.id,item.sku_select_obj.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>

                                </template>
                                <template v-else>
                                    <button class="confirm-addto-bag"  @click="handleGoodsAddCart(item.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>
                                </template>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>



        <!-- CUSTOMERS ALSO VIEWED -->
        <section class="recommend-wrapper">
            <div class="container">
                <div class="section-title">CUSTOMERS ALSO VIEWED</div>

                <!-- Products grid-->
                <div class="grid-products clearfix">
                    <!-- Product-->
                    <div class="slider viewed-items">
                        {selfTag:multi viewModel="\app\common\model\GoodsModel" where='["session_id"=>\think\facade\Session::instance()->getId(),"uid"=>session("user_info.user_id"),"activeState"=>"user_up"]'}
                            {include file="goods/include_item" /}
                         {/selfTag:multi}
                    </div>
                </div>
            </div>
        </section>


        <div class="goods-review-header clearfix">

            <div class="section-title">CUSTOMER REVIEWS(<span class="js-review-count">{:empty($commentInfo)?0:$commentInfo['count']}</span>)</div>

            <div class="review-summary-container clearfix">
                <dl class="average fl">
                    <dd class="rate-and-star clearfix">
                        <p class="rate tc"><span class="js-rate-all">{$goodsInfo['score']}</span></p>
                        <p class="star js-avgrate-star js-rate-star">
                            {:empty($goodsInfo['score'])?'':str_repeat('<i class="review-star rated"></i>',$goodsInfo['score'])}
                        </p>
                    </dd>
                </dl>
                <dl class="fit fl">
                    <dd class="item">
                        <div class="fit-item clearfix">
                            <p class="data fl">NICE</p> <span class="js-overall-small fr">{:empty($commentInfo)?0:$commentInfo['nice_per']}%</span>
                        </div>
                        <p class="progress"><i style="width: {:empty($commentInfo)?0:$commentInfo['nice_per']}%;" class="js-overall-small-rate"></i></p>
                    </dd>
                    <dd class="item">
                        <div class="fit-item clearfix">
                            <p class="data fl">BAD</p>
                            <span class="js-overall-fit fr">{:empty($commentInfo)?0:$commentInfo['bad_per']}%</span>
                        </div>
                        <p class="progress">
                            <i style="width: {:empty($commentInfo)?0:$commentInfo['bad_per']}%" class="js-overall-fit-rate"></i>
                        </p>
                    </dd>

                </dl>
                <!-- <dl class="photo fl">
                    <dd class="clearfix">
                        <div class="review-photo">
                            <ul class="slide clearfix">
                                <li class="reviewPic"><img src="https://review.zafcdn.com/upload/zaful/review/20220101/thumb/4D92A12611E1B1A4DDBF127ADCAEE73C_thumb.jpg" alt=""></li>
                                <li class="reviewPic"><img src="https://review.zafcdn.com/upload/zaful/review/20220101/thumb/4D92A12611E1B1A4DDBF127ADCAEE73C_thumb.jpg" alt=""></li>
                                <li class="reviewPic"><img src="https://review.zafcdn.com/upload/zaful/review/20220101/thumb/4D92A12611E1B1A4DDBF127ADCAEE73C_thumb.jpg" alt=""></li>
                            </ul>
                        </div>
                    </dd>
                </dl> -->
            </div>
        </div>
        <div class="goods-review-body">
            <div class="header clearfix">
                <div class="filter-review fr">
                    <div class="wrap">
                        <ul class="filter-review-nav">
                            <!-- <li class="active"><a href="javascript:;">Current Language</a></li>-->
                            <li class="" :class="{'active':listQuery.mode==''}" @click="handleComment('')"><a href="javascript:;">ALL</a></li>
                            <li :class="{'active':listQuery.mode=='img'}" @click="handleComment('img')"><a href="javascript:;">With Pictures</a></li>
                        </ul>
                        <!--<div class="filter-select-container">
                            <div class="filter-review-select">
                                <span class="review-sort-title">Sort by</span>
                                <div class="filter-select-placeholder">Recommend</div>
                                <ul class="filter-select-items">
                                    <li data-type="0" class="active"><a class="logsss_event_cl" href="javascript:;">Recommend</a></li>
                                    <li data-type="1"><a class="logsss_event_cl" href="javascript:;">Most Recent to Oldest</a></li>
                                    <li data-type="6"><a class="logsss_event_cl" href="javascript:;">Oldest to Most Recent</a></li>
                                    <li data-type="2"><a class="logsss_event_cl" href="javascript:;">Highest to Lowest Rating</a></li>
                                    <li data-type="3"><a class="logsss_event_cl" href="javascript:;">Lowest to Highest Rating</a>
                                    </li>
                                </ul>
                            </div>
                        </div>-->

                    </div>
                </div>
                <span class="fr review-sort-title">Sort by:</span>
            </div>
            <ul class="list">
                <li class="item js-reviewItem">
                    <div class="content clearfix" v-for="(item,index) in comment_list" :key="index">
                        <dl class="review">
                            <dd class="fl name">{{item.user_name}}</dd>
                            <dt class="star js-rate-star" >
                                <i class="review-star rated" v-for="(item) in item.level" :key="item"></i>
                            </dt>
                            <dd class="time">{{item.create_time}}</dd>
                            <dd class="text">{{item.content}}</dd><dd class="photos clearfix ">
                            <a href="javascript:;" class="js-reviewPic" v-for="(img,img_index) in item.img" :key="img_index">
                                <img :src="img" alt="">
                            </a>

                        </dd>
                            <dd class="review-size-info mt30">
                                <span  v-for="(sku,sku_index) in item.sku_name" :key="sku_index"> {{sku}} </span>
                            </dd>
                        </dl>
                    </div>
                </li>
            </ul>
            <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="comment_total"> </el-pagination>
            </nav>
        </div>


        <!-- YOUR RECENT HISTORY -->
        <section class="goods-history">
            <div class="container">
                <div class="section-title">YOUR RECENT HISTORY</div>
                 <!-- Products grid-->
                <div class="grid-products clearfix">
                    <!-- Product-->
                    <div class="row mx-n2">
                    {selfTag:multi viewModel="\app\common\model\UserHistoryGoodsModel" where='["session_id"=>\think\facade\Session::instance()->getId(),"uid"=>session("user_info.user_id"),"limit"=>5]'}
                        {include file="goods/include_item" /}
                    {/selfTag:multi}
                    </div>
                </div>
            </div>
        </section>
    
    </div>

</div>

{/block}
{block name='script'}

<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>

<link rel="stylesheet" type="text/css" href="/assets/css/slick.css"/>
<script type="text/javascript" src="/assets/js/slick.min.js"></script>
<script type="text/javascript" src="/assets/js/cloud-zoom.1.0.2.js"></script>

<script>
    function initPageJq(){
        $('.slider-preview').slick({
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            asNavFor: '.slider-thumblist'
        });

        $('.slider-thumblist').slick({
            verticalSwiping: true,
            vertical: true,
            infinite: false,      
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '.slider-preview',
            focusOnSelect: true,
            responsive: [{
                breakpoint: 750,
                settings: {
                    slidesToShow: 5,
                    vertical: false,
                    swipe: true,
                    verticalSwiping: false,
                    draggable: false
                }
            }, {
                breakpoint: 640,
                settings: {
                    slidesToShow: 4,
                    vertical: false,
                    swipe: true,
                    verticalSwiping: false,
                    draggable: false
                }
            }]
        });

        $('.viewed-items').slick({
            infinite: false,
            slidesToShow: 5,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
            ]
        });

        $('.goods-items').slick({
          infinite: false,
          speed: 300,
          slidesToShow: 3,
        });        

    };



    layui.extend({


    }).use([], function () {
        

        
        const sku_price = {:json_encode($sku_price)};
        const sku = {:json_encode($sku)};
        const ad_list = {:json_encode($ad_list)};
        const sold_state = {:empty($goodsInfo['sold_state'])?1:$goodsInfo['sold_state']};

        initVue({
            data: {
                goods_id:"{$goodsInfo['id']}",
                goods_coll_info:{id:"{$goodsInfo['id']}",is_coll:{$is_coll} },
                listQuery:{
                    mode:'',
                    check_sub_cond_id:'{:input("id")}',
                    page:1,
                },
                color:'hsv(0, 53%, 58%)',
                sold_state:sold_state,
                buy_num:1,
                imageZoom:false,
                comment_total:0,
                comment_total_page:0,
                comment_list:[],
                show_gift:false,
                gift_list:[],
                sku_group_name:'',
                ad_obj:{},
                ad_list: ad_list,
                sku_price: sku_price,
                sku: sku,
            },
            components: {

            },
            computed: {
                get_sku_price_obj:function(){
                    var obj={}
                    for(var i=0;i<this.sku_price.length;i++){
                        const info = this.sku_price[i]
                        if(info.name===this.sku_group_name){
                            obj = info
                            break;
                        }
                    }
                    console.log('get_sku_price_obj',obj)
                    return obj
                },
                get_sku_price_names:function(){
                    const names = this.get_sku_price_obj.name
                    return names ? names.split(',') : []
                },
                get_ad_show_list:function(){
                    return this.ad_obj && this.ad_obj.id>0
                },
                get_ad_goods_list:function(){
                    return (this.ad_obj).list||[]
                },
            },
            created: function () {
                
            },
            mounted: function () {
                var that = this;
                if ( !this.sku_group_name.length && this.sku_price.length>0) {
                    this.sku_group_name = this.sku_price[0].name
                }
                this.getComment()
                this.ad_list.map(function(item){
                    item.list.map(function(goods){
                        that.handleGoodsShowCart(goods)
                    })
                })
                this.$nextTick(function(){
                    // setTimeout(function(){
                    initPageJq()
                    // },500)
                    initCloudZoom()
                })
                this.getGiftGoods()
                //增加统计数据
                this.$network('index/statistics',{  type:'goods_detail',cond_value:this.goods_id })

            },
            methods:{
                clickZoom:function(){
                    this.imageZoom = true
                    this.$nextTick(function(){
                        initCloudZoom()
                    })
                },

                handleBuyNum:function(num){
                    if ( num > 0 ) {
                        this.buy_num += num
                    }else{
                        if ( this.buy_num <= 1 ){
                            return
                        }
                        this.buy_num += num
                    }
                },
                handleSku:function(index,attr_index,attr_name){
                    this.get_sku_price_names[index] = attr_name
                    this.sku_group_name = this.get_sku_price_names.join(',')
                },
                handleBuyNumChange:function(){
                    this.$nextTick(function(){
                        num = parseInt(this.buy_num);
                        if ( num <=0 ) {
                            this.buy_num = 1
                        }
                    })
                },
                handleAddCart:function(){
                    const that = this
                    this.$network('goods/cartAdd',{
                        goods_info:[{goods_id:this.goods_id, sku_id:this.get_sku_price_obj.id, num:this.buy_num}],
                    }).then(function(res){
                        var data = res.data || {}
                        that.cart_num = data.num||0
                        that.$message.success(res.msg)
                    })
                },
                getComment:function(is_reset){
                    if(is_reset===true){
                        this.listQuery.page = 1
                    }
                    var that = this
                    this.$network("comment/lists",this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.comment_total = data.total || 0
                        that.comment_total_page = data.total_page || 0
                        that.comment_list = data.list ||[]
                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this.getComment()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this.getComment()
                },
                handleComment:function(mode){
                    this.listQuery.mode = mode
                    this.getComment(true)
                },
                getGiftGoods:function(){
                    const that = this
                    this.$network('goods/lists',{
                        check_gift : 1,
                        limit:100,
                    }).then(function(res){
                        var data = res.data || {}
                        var gift_list = data.list||[]

                        gift_list.map(function(goods){
                            that.handleGoodsShowCart(goods)
                        })
                        that.gift_list = gift_list
                    })
                }
            },
        })
    })


</script>
{/block}